<script lang="ts" setup>
import { defineProps } from 'vue';
defineProps<{ disabled: boolean, title?: string }>()
const emits = defineEmits(['onClick'])
// 点击按钮触发
const onClick = () => {
  emits('onClick')
}
</script>
<!-- 传入布尔值判断是否禁用按钮 -->
<template>
  <div class="btn">
    <button :disabled="disabled" :class="disabled ? '' : 'active'" @click="onClick">{{ title ? title : '下一步' }}</button>
  </div>
</template>
<style lang="scss" scoped>
.btn {
  button {
    width: 100%;
    height: 42px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 30px;
    color: #f0f1f2;
    background-color: #fdfdfd;
    transition: all .2s;
  }

  .active {
    background-color: #2cb5a5;
    color: #fff;

  }
}
</style>
